<template>
    <div class="main-page">
        <el-form :model="formData" label-position="left" ref="formData"
                 size="mini" class="demo-form-inline" style="margin-left: 10px;margin-right: 10px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="学生状态">
                        <el-select @change="initData" size="mini" class="search-input" v-model="formData.status"
                                   placeholder="请选择学生状态">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in gstuStatusList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="微信状态">
                        <el-select @change="initData" class="search-input" v-model="formData.wxstatus"
                                   placeholder="请选择学生状态">
                            <el-option value="" label="全部"></el-option>
                            <el-option
                                v-for="item in gwxBindStatusList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item prop="username" label="学生名称">
                        <el-col :span="6">
                            <el-input @change="initData" class="search-input" label="学生姓名" v-model="formData.name"
                                      placeholder="必填"></el-input>
                        </el-col>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
            <el-col :span="8">
                <el-form-item label="学生性别">
                    <el-select @change="initData" class="search-input" v-model="formData.sex"
                               placeholder="请选择学生性别">
                        <el-option value="" label="全部"></el-option>
                        <el-option
                            v-for="item in gwxBindStatusList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="所在班级">
                    <el-select @change="initData" class="search-input" v-model="formData.cid"
                               placeholder="所在班级">
                        <el-option value="" label="全部"></el-option>
                        <el-option
                            v-for="item in gclassList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            </el-row>
            <el-row>
                <el-col :span="16">
                    <el-form-item label="出生日期">
                        <el-date-picker
                            v-model="formData.birthday"
                            type="daterange"
                            align="right"
                            unlink-panels
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-row style="margin-bottom: 10px">
            <el-button @click="searchTag(index)" plain class="tag-button" v-for="(item,index) in searchtags"
                       type="primary">
                <span>{{item.name}}</span>
            </el-button>
        </el-row>
        <el-row>
            <el-button type="primary" size="mini" @click="resetForm('formData')" icon="el-icon-search">重置
            </el-button>
            <el-button type="primary" @click="this.initData" size="mini" icon="el-icon-search">搜索</el-button>
            <el-button type="info" @click="this.addStu" size="mini" icon="el-icon-search">添加学生</el-button>
            <el-button type="info" @click="this.planclass" size="mini" icon="el-icon-search">添加排课</el-button>
        </el-row>


        <div class="table_container">
            <el-table
                v-loading="loading"
                :data="tableData"
                highlight-current-row
            >
                <el-table-column
                    property="uid"
                    label="编号"
                    min-width="10%">
                    <template slot-scope="scope">
                        <el-button @click="userDetail()" size="mini" type="info">{{scope.row.id}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                    property="name"
                    label="姓名"
                    min-width="10%">
                    <template slot-scope="scope">

                        <el-row>
                            <el-button size="mini" type="primary" circle>{{scope.row.name |firstChar}}</el-button>
                            <br><span class="enamecls">{{scope.row.name}}</span></el-row>

                    </template>
                </el-table-column>
                <el-table-column
                    property="name"
                    label="学生类别"
                    min-width="10%">
                    <template slot-scope="scope">
                        <el-row>
                            <el-tag size="mini" type="info">{{scope.row.type |commentFmt(gstuTypeMap)  }}</el-tag>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column
                    property="name"
                    label="性别"
                    min-width="10%">
                     <template slot-scope="scope">
                        <p>{{scope.row.sex| commentFmt(gsexMap) }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                property="name"
                label="出生日期"
                min-width="10%">
                <template slot-scope="scope">
                    <p>{{scope.row.birthday| dateFmt }}</p>
                </template>
            </el-table-column>
                <el-table-column
                    property="tel"
                    label="联系方式"
                    min-width="10%">
                     <template slot-scope="scope">
                        <p>{{scope.row.tel }}</p>
                    </template>
                </el-table-column>

                <el-table-column
                    property="name"
                    label="合约课时数"
                    min-width="10%">
                     <template slot-scope="scope">
                        <p>{{scope.row.totalRecords }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="name"
                    label="剩余课时数"
                    min-width="10%">
                     <template slot-scope="scope">
                        <p>{{scope.row.remainRecords }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="createtime"
                    label="创建时间"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.createtime |dateFmt }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="updatetime"
                    label="修改时间"
                    min-width="10%">
                    <template slot-scope="scope">
                        <p>{{scope.row.updatetime |dateFmt }}</p>
                    </template>
                </el-table-column>
                <el-table-column
                    property="name"
                    label="备注"
                    min-width="10%">
                     <template slot-scope="scope">
                        <p>{{scope.row.comments }}</p>
                    </template>
                </el-table-column>

                <el-table-column
                    property="status"
                    label="状态"
                    min-width="10%">
                     <template slot-scope="scope">
                        <p>{{scope.row.status| commentFmt(gstuStatusMap)}}</p>
                    </template>
                </el-table-column>

                <el-table-column
                    label="操作"
                    min-width="10%">
                    <template slot-scope="scope">
                        <el-button-group>
                            <el-tooltip content="购买课程" placement="top">
                                <el-button @click="purchase" class="col-btn" size="mini" type="primary"
                                           icon="el-icon-goods"></el-button>
                            </el-tooltip>
                            <el-tooltip content="学生修改" placement="top">
                                <el-button @click="modifyUser" class="col-btn" size="mini" type="primary"
                                           icon="el-icon-edit"></el-button>
                            </el-tooltip>
                            <el-tooltip content="学生删除" placement="top">
                                <el-button @click="deleteuser" class="col-btn" size="mini" type="primary"
                                           icon="el-icon-delete"></el-button>
                            </el-tooltip>
                        </el-button-group>
                    </template>
                </el-table-column>

            </el-table>
            <div class="Pagination" style="text-align: left;margin-top: 10px;">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="this.pager.pageNo"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="this.pager.pageSize"
                    layout=" prev, pager, next,jumper"
                >
                </el-pagination>
            </div>
        </div>

        <el-dialog title="合约购买" :visible.sync="purchaseVisible">
            <purchase></purchase>
            <template slot="footer">
                <el-row v-show="isAdd" type="flex" justify="end">
                    <el-button @click="closepurchase" type="info" plain size="mini">取消</el-button>
                    <el-button @click="panelpurchase" type="primary" plain size="mini">确认</el-button>
                </el-row>
            </template>
        </el-dialog>


        <el-dialog
            title="排课计划"
            :visible.sync="planDialogVisible"
        >
            <el-tabs v-model="planActiveName" @tab-click="">
                <el-tab-pane label="新建班级" name="first">
                    <addClass></addClass>
                </el-tab-pane>
                <el-tab-pane label="插班排课" name="second">
                    <joinClass></joinClass>
                </el-tab-pane>
                <el-tab-pane label="一对一排课" name="third">
                    <scheduleClass></scheduleClass>
                </el-tab-pane>
            </el-tabs>


        </el-dialog>

        <el-dialog title="提示"
                   :visible.sync="ModifyDialogVisible"
        >
            <add-student :childForm="userForm" operType="modify" :stuid="this.modifystuid"></add-student>
            <template slot="footer">
                <el-row v-show="isAdd" type="flex" justify="end">
                    <el-button @click="closeadd" type="info" plain size="mini">取消</el-button>
                    <el-button @click="panelModifyUser" type="primary" plain size="mini">确认</el-button>
                </el-row>
            </template>
        </el-dialog>


        <el-dialog
            title="提示"
            :visible.sync="AddDialogVisible"
            @close="clearpanel"
        >
            <el-steps :active="addActive" finish-status="success">
                <el-step title="添加学生"></el-step>
                <el-step title="添加合约"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <add-student ref="stupanel" :childForm="userForm" v-show="isAdd"></add-student>
            <add-contract ref="contractpanel" :childForm="contractForm" v-show="!isAdd"></add-contract>
            <template slot="footer">
                <el-row v-show="isAdd" type="flex" justify="end">
                    <el-button @click="closepanel" type="info" plain size="mini">取消</el-button>
                    <el-button @click="childAddStu" type="primary" plain size="mini">确认</el-button>
                </el-row>
                <el-row v-show="!isAdd">
                    <el-button @click="cancelAddContract" type="info" plain size="mini">上一步</el-button>
                    <el-button @click="childAddContract" plain style="width: 100px" type="primary" size="mini">提交
                    </el-button>
                </el-row>
            </template>
        </el-dialog>

    </div>


</template>

<script>
    import {mapActions, mapState, mapGetters} from 'vuex'
    import headTop from '../components/headTop'
    import addStudent from '../page/addStudent'
    import updateStudent from '../page/updateStudent'
    import userDetail from '../page/userDetail.vue'
    import addContract from '../page/addContract'
    import joinClass from '@/page/components/joinClass'
    import addClass from '../page/components/addClass'
    import scheduleClass from '@/page/components/scheduleClass'
    import purchase from '@/page/components/purchase'
    import {addContractApi, queryStusApi, deleteStuApi, updateStuApi} from '@/api/getData'
    import ElInput from "../../node_modules/element-ui/packages/input/src/input.vue";
    import ElOption from "../../node_modules/element-ui/packages/select/src/option.vue";

    export default {
        data() {
            return {
                planActiveName: '',
                searchtags: [{'name': '快到期学生', 'searchtag': "1", type: "success"}, {
                    'name': '快到期学生',
                    "searchtag": "2",
                    type: "success"
                }],
                classList:[],
                pager: {pageNo: 1, pageSize: 5},
                isAdd: true,
                radio2: 0,
                addActive: 0,
                loading: false,
                purchaseVisible: false,
                AddDialogVisible: false,
                planDialogVisible: false,
                ModifyDialogVisible: false,
                classrange: '',
                empsList: [],
                formData: {
                    searchtagType: '',
                    status: '',
                    wxStatus: '',
                    name: '',
                    cid: '',
                    birthday: '',
                },
                modifystuid: '',
                purchaseForm: {},


                userForm: {
                    test: 1,

                },


                contractForm: {},
                value: '',
                detailshowDialog: false,
                updateshowDialog: false,
                dialogType: '',
                tableData: [],
                count: 0,

            }
        },
        components: {
            ElOption,
            ElInput,
            headTop,
            addStudent,
            userDetail,
            updateStudent,
            addContract,
            addClass,
            joinClass,
            scheduleClass,
            purchase,

        },

        computed: {
            ...mapGetters(['adminInfo','gsexMap', 'gsexList', 'gstuTypeList', 'gstuStatusList', 'gwxBindStatusList','gsubjectList','gsexList','gstuTypeMap','gstuStatusMap','gclassList'])
        },

        created() {
        },
        mounted() {
            this.initData();

        },
        methods: {


            ...mapActions(['getPeriod']),
            handleSizeChange: function () {

            },
            closeadd: function () {
                this.AddDialogVisible = false;
                this.addForm = {};

            },

            searchTag: function (searchtag) {
                this.formData.searchtagType = searchtag;
                this.initData();

            },


            //关闭合同添加
            closepurchase: function () {

            },
            //添加合同
            async panelpurchase() {
                this.purchaseForm = this.$refs.purchasepanel.childForm;
                const res = await addContractApi({"data": this.purchaseForm});
                if (res.success == true) {
                    this.initData();
                }

            },
            //删除用户
            deleteuser: function () {
                this.$confirm('确认删除？')
                    .then(_ => {
                        confirmdelete();
                    })
                    .catch(_ => {
                    });

            },
            //确认删除用户
            async confirmdelete(id) {
                //确认删除
                var data = {"data": {"uid": row.uid}}
                await deleteStuApi(data)
                this.$message({
                    type: 'success',
                    message: '删除成功'
                });

            },
            //用户详情
            userDetail: function () {
                this.$router.push({path: '/userDetail'});
            },

            //弹出合约弹框
            purchase: function () {
                this.purchaseVisible = true;
            },


            clearpanel: function () {
                this.userForm = {};
                this.contractForm = {};
                this.addActive = 0;
                this.isAdd = true;
            },
            closepanel: function (data) {
                this.AddDialogVisible = false;
                this.clearpanel();
            },
            //打开修改用户弹框
           async  modifyUser(id) {
                this.modifystuid = id;
                this.ModifyDialogVisible = true;
                const res=await studetailAPi({data:{id:id}});
               /* if(res.success==true){
                    this.$refs.
                }
                */


            },

            cancelAddContract: function (data) {
                this.isAdd = !this.isAdd;
                this.addActive--;

            },


            childAddStu: function (data) {
                this.userForm = this.$refs.stupanel.childForm;
                this.isAdd = false;
                this.addActive++;
            },


            async childAddContract(data) {
                this.contractForm = this.$refs.contractpanel.childForm;
                this.userForm = this.$refs.stupanel.childForm;
                this.contractForm.stuReq=this.userForm;
                const res = await addContractApi({data:this.contractForm});
                if (res.success == true) {
                    this.closepanel();
                    this.initData();
                }
            },
            //修改学生信息
            async panelModifyUser(data) {
                this.userForm = this.$refs.stupanel.childForm;
                const res = await updateStuApi({"data": this.userForm});
                if (res.success == true) {
                    this.ModifyDialogVisible = false;
                    this.initData();
                }
            },


            handleCurrentChange: function () {

            },
            async initData() {
                this.tableData=[];
                const res = await queryStusApi({"data": this.formData});
                var list = res.data;
                if (res.success == true) {
                    list.forEach(item => {
                        const tableData = {};
                        tableData.id = item.id;
                        tableData.name = item.name;
                        tableData.type = item.type;
                        tableData.tel=item.tel;
                        tableData.sex=item.sex;
                        tableData.comments=item.comments;
                        tableData.status = item.status;
                        tableData.birthday = item.birthday;
                        tableData.createtime=item.createtime;
                        tableData.updatetime=item.updatetime;
                        tableData.totalRecords=item.totalRecords;
                        tableData.remainRecords=item.remainRecords;

                        this.tableData.push(tableData);
                    });
                }

            },
            addStu: function () {
                this.AddDialogVisible = true;

            },
            planclass: function () {
                this.planDialogVisible = true;

            }

        },
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .el-main {
        padding: 5px;
    }
    .enamecls {
        font-size: 12px;
        color: #bbbbbb;
    }

</style>
